<template>
  <view class="tail-page">
    <block v-for="(item,index) in cardlList" :key="index">
      <view class="list text-center">
        <view class="item">
          <view class="item-one">
            <b v-if="item.couponType==2">￥{{ item.minMoney }}</b>
            <b v-if="item.couponType==1">{{ item.sale }}折</b>
          </view>
          <view class="item-two">
            <div class="center-two">
              <span class="xrcxq">{{ item.thaliName }}</span>
            </div>
            <div class="center-two">
              <span class="yxqz">有效期至{{item.endTime}}</span>
            </div>
          </view>

          <view class="item-three">
            <image class="images-yishixiao" src="/static/images/yishixiao.png"></image>
          </view>
        </view>
        <view class="item-bottom">
          <view class="item-wh">
            <div class="item-bottom-left">
              <span>限时段&nbsp;|&nbsp;限订单&nbsp;|&nbsp;限车型&nbsp;|&nbsp;限使用渠道</span>
            </div>
            <div class="item-bottom-right" @click="toSelectOne( item.thaliId )">
              <span class="yhq">查看详情></span>
            </div>
          </view>
        </view>
      </view>
    </block>
  </view>
</template>
<script>

import {getMyCouponStatus} from "@/api/durian/thail/thail.js";

export default {
  data() {
    return {
      cardlList: []
    };
  },
  onLoad() {
    this.selectMyCard();
  },
  methods: {
    selectMyCard() {
      getMyCouponStatus().then(res=>{
        this.cardlList=res.rows;
      })
    },
    toSelectOne(id){
      this.$tab.reLaunch('/pages/mine/tail/coupon?id='+JSON.stringify(id))
    }
  }


}
</script>

<style>
.images-yishixiao{
  width: 60px;
  height: 40px;
}
.item-bottom-right{
  position: relative;
  right: 20px;
  top: -12px;
  margin-left: 300px;
  font-size: 10px;
  width: 50px;
  height: 30px;
  color: #8f8f94;
}
.item-wh{
  width: 340px;
  height: 30px;
  margin-left: auto;
  margin-right: auto;
  border-top: 1px dashed #8f8f94;
}
.item-bottom-left{
  display: flex;
  width: 250px;
  font-size: 10px;
  color: #9a9a9a;
  margin-top: 7px;
}
.item-bottom{
  display: flex;
  width: 360px;
  height: 30px;
  background-color: #f4f7f8;
  margin-left: auto;
  margin-right: auto;
  border-radius: 0px 0px 5px 5px;
}
.xrcxq{
  font-size: 12px;
  margin-top: 10px;
}
.center-two{
  display: flex;
}
.yxqz{
  font-size: 10px;
}
.item {

  display: flex;
  width: 360px;
  height: 10vh;
  background-color: #f4f7f8;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px 5px 0px 0px;
}
.item-one{
  display: flex;
  font-size: 22px;
  color: #8f939c;
  height: 15vh;
  margin-top: 20px;
  margin-bottom: auto;
  margin-left: 20px;
  margin-right: auto;
  padding-top: 5px;
}
.item-two{
  width: 200px;
  //position: relative;
  //top: 10%;
  //left: 50%;;
  height: 80px;
  margin-left: 10px;
  padding-top: 15px;
  color: #8f8f94;
}

.item-three{
  height: 15vh;
  margin-top: 14px;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  padding-top: 5px;
}
</style>